<!--头像封装组件  -->
<template>
  <div class="avater">
    <img :src="props.src" :alt="props.alt" />
    <span>{{ props.rate }}</span>
  </div>
</template>


<script setup>
import { reactive, ref, computed } from "vue";
const props = defineProps(["src", "alt", "rate"]);

const color = computed(() => {
  // 编写判断颜色的代码
  if (props.rate == 1) {
    return "rgb(254, 45, 70)";
  } else if (props.rate == 2) {
    return "rgb(245, 102, 1)";
  } else {
    return "rgb(247, 169, 1)";
  }
});
</script>


<style scoped>
/* @import url(); 引入公共css类 */

.avater {
  width: 150px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* 图片 */
.avater img {
  width: 100%;
  vertical-align: top;
}

.avater span {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: v-bind(color);
  top: 0;
  left: 0;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
}
</style>